<template>
    <popup ref="popupRef" :title="title" :formState="formState" :rules="rules" @success="success" :editApi="updateAdmin"
        :addApi="addAdmin">
        <template #default="{ formState }">

            <div class="flex justify-center items-center mb-10 ">
                <a-avatar :size="100" shape="square" :src="formState.avatar" />
            </div>
            <a-form-item label="管理员名称" name="username">
                <a-input v-model:value="formState.username" allow-clear />
            </a-form-item>

            
            <a-form-item label="管理员角色" name="role">
                <m-form-role v-model:value="formState.role" mode="multiple" />
            </a-form-item>

            <a-form-item label="管理员密码" name="password">
                <a-input-password v-model:value="formState.password" allow-clear autocomplete="off" />
            </a-form-item>

            <a-form-item v-if="formState.password" label="确认密码" name="confirmPassword">
                <a-input-password v-model:value="formState.confirmPassword" allow-clear autocomplete="off" />
            </a-form-item>

            <a-form-item label="管理员昵称" name="nickname">
                <a-input v-model:value="formState.nickname" allow-clear />
            </a-form-item>

            <a-form-item label="管理员职位" name="organize">
                <m-form-organize-linkage v-model:value="formState.organize" />

            </a-form-item>
        </template>

    </popup>
</template>

<script setup lang="ts">
import Popup from '@/components/popup/index.vue'
import { addAdmin, updateAdmin } from '@/api/system/permission/admin'
import { getRoleList } from '@/api/system/permission/role'
const popupRef = ref<InstanceType<typeof Popup>>()
const mode = ref<string>('add')
const emits = defineEmits(['success'])
interface FormState {   
    id: number | null,
    username: string,
    password: string,
    confirmPassword: string,
    nickname: string,
    role: number[],
    organize: number[]
}
const formState = reactive<FormState>({
    id: null,
    username: '',
    password: '',
    confirmPassword: '',
    nickname: '',
    role: [],
    organize: []
})
const title = computed(() => {
    return mode.value === 'add' ? '新增管理员' : '编辑管理员'
})

const rules = {
    username: [
        { required: true, message: '请输入管理员名称' },
        { pattern: /^[\w-]{4,16}$/, message: '管理员名称长度为4-16位' }
    ],
    role: [{ required: true, message: '请选择管理员角色' }],
    password: [{ required: formState.password != '' ? true : false, message: '请输入管理员密码' }],
    confirmPassword: [{ required: true, message: '请输入确认密码' }]
}

const open = async (modes: string, record?: any) => {
    mode.value = modes
    if (record) {
        for (const key in formState) {
            formState[key] = record[key]
        }
    }
    popupRef.value?.open(modes, formState)
   
    const role = await getRoleList({})
    console.log(role)
}

const success = () => {
    emits('success')
}

defineExpose({
    open
})
</script>
